<template>
  <div class="block-container create-cont">
    <a class="back" @click="gotoExamRoomPage">
      <i class="el-icon-back"></i>
      <span>返回</span>
    </a>
    <P class="big-font">创建考场</P>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="c-form">
      <el-form-item label="考点选择" prop="areaName">
        <el-select v-model="form.areaName" placeholder="请选择" style="width:400px" disabled>
          <el-option
            v-for="(item,idx) in examRoomList"
            :key="idx"
            :label="item.areaName"
            :value="item.areaName"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="考场编号" prop="roomCode">
        <el-input v-model="form.roomCode" style="width:400px"></el-input>
      </el-form-item>-->
      <el-form-item label="考场座位数" prop="seatNum">
        <!-- <el-select v-model="form.seatNum" allow-create filterable placeholder="请选择考场座位数" style="width:400px">
          <el-option v-for="(item, idx) in seatNumList" :key="idx" :label="item" :value="item"></el-option>
        </el-select>-->
        <el-input v-model="form.seatNum" style="width:400px"></el-input>
      </el-form-item>
      <el-form-item label="座位分布" prop="seatDistribution">
        <!-- <el-select v-model="form.seatDistribution" allow-create filterable placeholder="请选择座位分布" style="width:400px">
          <el-option v-for="(item, idx) in seatDistributionList" :key="idx" :label="item" :value="item"></el-option>
        </el-select>-->
        <el-input v-model="form.seatDistribution" style="width:400px"></el-input>
        <span class="row-tip">提示：格式为行*列(5*6)</span>
      </el-form-item>
      <el-form-item label="座位分布图">
        <el-input type="textarea" v-model="form.desc" style="width:400px;"></el-input>
      </el-form-item>
      <el-form-item label="考场座位ID">
        <!-- <el-input type="textarea" v-model="form.desc" style="width:400px"></el-input> -->
        <!-- <el-button type="primary" style="margin-right:10px;margin-top: 10px">导入表格</el-button> -->
        <div style="display:flex;margin-top:6px">
          <div>
            <a href="javascript:;" class="blueButton">{{seatsList.length ? '重新上传': '点击上传'}}</a>
            <input type="file" class="myFileUpload" @change="changeFile" ref="upload" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
            <div class="show">{{fileName}}</div>
          </div>
          <a :href="GLOBAL.COMMON + '/examseat/getSeatsExcel?roomId='+ $route.query.id" v-if="seatsList.length" style="margin-left: 120px">
           <el-button size="medium">下载表格</el-button>
          </a>
          <a :href="GLOBAL.COMMON + '/examseat/download_template'" :style="{marginLeft: seatsList.length ? '20px' : '120px'}">
            <el-button size="medium">下载模板</el-button>
          </a>
        </div>
      </el-form-item>
      <el-form-item ref="setas" class="setas" v-if="$route.query.id">
        <div class="seats-list" style="margin-top: 20px;display: flex">
          <table style="margin-right:20px" v-if="seatsList.length">
            <thead>
              <tr>
                <td>座位号</td>
                <td>全景摄像头编号/近景摄像头编号</td>
              </tr>
            </thead>
            <tbody v-for="(item,idx) in seatsList" :key="item.id" v-if="idx<12">
              <tr>
                <td
                  rowspan="2"
                >{{item.code.indexOf('_') ===-1 ? item.code : item.code.split('_')[1]}}</td>
                <td>{{item.lensNo1}}</td>
              </tr>
              <tr>
                <td>{{item.lensNo2}}</td>
              </tr>
            </tbody>
          </table>
          <table style="margin-right:20px" v-if="seatsList.length>12">
            <thead>
              <tr>
                <td>座位号</td>
                <td>全景摄像头编号/近景摄像头编号</td>
              </tr>
            </thead>
            <tbody v-for="(item,idx) in seatsList" :key="item.id" v-if="idx>12">
              <tr>
                <td
                  rowspan="2"
                >{{seatsList[12 + idx].code.indexOf('_') ===-1 ? seatsList[12 + idx].code : seatsList[12 + idx].code.split('_')[1]}}</td>
                <td>{{seatsList[12 + idx].lensNo1}}</td>
              </tr>
              <tr>
                <td>{{seatsList[12 + idx].lensNo2}}</td>
              </tr>
            </tbody>
          </table>
          <table v-if="seatsList.length>24">
            <thead>
              <tr>
                <td>座位号</td>
                <td>全景摄像头编号/近景摄像头编号</td>
              </tr>
            </thead>
            <tbody v-for="(item,idx) in seatsList" :key="item.id" v-if="idx>24">
              <tr>
                <td
                  rowspan="2"
                >{{seatsList[24 + idx].code.indexOf('_') ===-1 ? seatsList[24 + idx].code : seatsList[24 + idx].code.split('_')[1]}}</td>
                <td>{{seatsList[24 + idx].lensNo1}}</td>
              </tr>
              <tr>
                <td>{{seatsList[24 + idx].lensNo2}}</td>
              </tr>
            </tbody>
          </table>
          <table style="display:none" id="table">
            <thead>
              <tr>
                <td>座位号</td>
                <td>全景摄像头编号/近景摄像头编号</td>
              </tr>
            </thead>
            <tbody v-for="item in seatsList" :key="item.id">
              <tr>
                <td
                  rowspan="2"
                >{{item.code.indexOf('_') ===-1 ? item.code : item.code.split('_')[1]}}</td>
                <td>{{item.lensNo1}}</td>
              </tr>
              <tr>
                <td>{{item.lensNo2}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-form-item>
      <el-form-item label="考场地址" prop="roomName" style="padding-top:20px;">
        <el-input v-model="form.roomName" style="width:400px"></el-input>
      </el-form-item>
      <el-form-item label="候考地址" prop="waitName">
        <el-input v-model="form.waitName" style="width:400px"></el-input>
      </el-form-item>
    </el-form>
    <div class="btn-group">
      <el-button type="primary" class="c-btn" @click="addExamRoom">确定</el-button>
      <el-button class="c-btn" @click="gotoExamRoomPage">取消</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Api from "../../api/index.js";
export default {
  name: "createExamRoom",
  data() {
    let validNum = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入考场座位数"));
      } else {
        let r = /^[\d]+$/;
        if (r.test(value)) {
          callback();
        } else {
          callback(new Error("考场座位数必须为数字值"));
        }
      }
    };
    let validateSeatDistribution = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入考场座位分布"));
      } else {
        let r = /^[\d]+[*][\d]+$/;
        if (r.test(value)) {
          callback();
        } else {
          callback(new Error("考场座位分布格式不正确"));
        }
      }
    };
    return {
      form: {
        roomCode: null,
        areaName: null,
        colNum: null,
        roomName: null,
        rowNum: null,
        seatNum: null,
        seatDistribution: null,
        waitName: null
      },
      examRoomList: [],
      // areaName: null,
      rules: {
        areaName: [
          { required: true, message: "请选择考点", trigger: "change" }
        ],
        // roomCode: [
        //   { required: true, message: '请输入考场编号', trigger: 'blur' }
        // ],
        seatNum: [{ required: true, validator: validNum, trigger: "blur" }],
        seatDistribution: [
          {
            required: true,
            validator: validateSeatDistribution,
            trigger: "blur"
          }
        ],
        roomName: [
          { required: true, message: "请输入考场地址", trigger: "blur" }
        ],
        waitName: [
          { required: true, message: "请输入候考地址", trigger: "blur" }
        ]
      },
      fileName: "",
      seatsList: []
      // seatNumList: [24, 25],
      // seatDistributionList: ['6*4', '5*5']
    };
  },
  created() {
    this.form.areaName = this.$route.query.area;
    if (this.$route.query && this.$route.query.id) {
      this.getSeats(this.$route.query.id);
      this.form.id = this.$route.query.id;
      this.form.roomCode = this.$route.query.code;
      this.form.seatNum = this.$route.query.seat;
      this.form.roomName = this.$route.query.add;
      this.form.waitName = this.$route.query.wait;
      this.form.seatDistribution =
        this.$route.query.row + "*" + this.$route.query.col;
      // if (this.seatNumList.indexOf(this.form.seatNum) < 0) {
      //   this.seatNumList.push(this.form.seatNum)
      //   this.seatDistributionList.push(this.form.seatDistribution)
      // }
    }
    this.getExamRoomList();
  },
  methods: {
    // 返回考场列表页面
    gotoExamRoomPage() {
      this.$refs["form"].resetFields();
      this.$router.push({ name: "examinationRoom" });
    },
    // 获取考点列表
    getExamRoomList() {
      let that = this;
      that.$http.getExamRoomList().then(res => {
        if (res.code === 20000) {
          that.examRoomList = res.data;
        } else {
          that.$message.error(res.msg);
        }
      });
    },
    // 添加考场
    addExamRoom() {
      let that = this;
      that.$refs["form"].validate(valid => {
        if (valid) {
          let _distribution = that.form.seatDistribution.split("*");
          that.form.rowNum = _distribution[0] || 0;
          that.form.colNum = _distribution[1] || 0;

          let file = this.$refs.upload.files[0];
          if (this.$refs.upload.files.length) {
            var data = new FormData();
            data.append("file", file);
            for (const key in this.form) {
              data.append(key, this.form[key]);
            }
            axios
              .post(`${this.GLOBAL.COMMON}/examRoom/addExamRoom`, data, {
                headers: {
                  "Content-Type": "multipart/form-data"
                }
              })
              .then(res => {
                res = res.data;
                if (res.code === 20000) {
                  if (that.form.id) {
                    that.$message.success("修改考场成功");
                  } else {
                    that.$message.success("添加考场成功");
                  }
                  that.gotoExamRoomPage();
                } else {
                  that.$message.error(res.msg);
                }
              });
          } else {
            that.$http.createExamRoom(that.form).then(res => {
              if (res.code === 20000) {
                if (that.form.id) {
                  that.$message.success("修改考场成功");
                } else {
                  that.$message.success("添加考场成功");
                }
                that.gotoExamRoomPage();
              } else {
                that.$message.error(res.msg);
              }
            });
          }
        } else {
          that.$message.error("请填写完整信息再提交");
          return false;
        }
      });
    },
    changeFile(file) {
      this.fileName = this.$refs.upload.value;
      this.seatsList = []
      document.getElementsByClassName("setas")[0].style.height = "40px";
      // console.log('this.$refs.upload', this.$refs.upload)
    },
    getSeats(id) {
      Api.getSeats({
        roomId: id
      }).then(res => {
        if (res.code === 20000) {
          this.seatsList = res.data;
          let num = this.seatsList.length > 12 ? 12 : this.seatsList.length;
          this.$nextTick(() => {
            document.getElementsByClassName("setas")[0].style.height =
              num * 82 + 40 + "px";
          });
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
color = #4177ff;
background = #f3f3f3;

.back {
  cursor: pointer;
  font-size: 14px;
  color: color;

  span {
    margin-left: 10px;
  }
}

.big-font {
  font-size: 18px;
  font-weight: bold;
  color: #555;
  line-height: 48px;
  margin-bottom: 10px;
}

.item {
  width: 14%;
  float: left;
  margin-bottom: 30px;

  .school {
    width: 126px;
    height: 94px;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: relative;

    p {
      text-align: center;
      line-height: 94px;
    }

    i {
      position: absolute;
      bottom: 10px;
      right: 10px;
      color: color;
      font-size: 18px;
    }
  }
}

.fuzhu {
  top: 10px;
  margin-bottom: 20px;
}

.btn {
  a {
    display: inline-block;
    width: 70px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    margin-right: 14px;

    &.save {
      background: color;
    }

    &.cancel {
      color: color;
      border: 1px solid color;
    }
  }
}

.row-tip {
  margin-left: 15px;
  display: inline-block;
  font-size: 13px;
  color: #666;
}
</style>
<style>
.blueButton {
  position: absolute;
  display: block;
  width: 98px;
  height: 36px;
  background-color: #00b3ee;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  top: 8px;
}
.blueButton:hover {
  text-decoration: none;
}
/*自定义上传,位置大小都和a完全一样,而且完全透明*/
.myFileUpload {
  position: absolute;
  display: block;
  width: 98px;
  height: 36px;
  opacity: 0;
}
/*显示上传文件夹名的Div*/
.show {
  position: absolute;
  top: 40px;
  width: 100%;
  height: 30px;
  font: normal normal normal 14px/30px "Microsoft YaHei";
}
</style>

<style>
.seats-list table thead {
  background: #e0e0e0;
}
.seats-list table {
  width: 400px;
}
.seats-list table td {
  border: 1px solid #f0f0f0;
  text-align: center;
  height: 30px;
  vertical-align: middle;
}
</style>
